function Button(sprite, width, height) {
  this.x;
  this.y;
  this.sprite = sprite;
  this.highlighted = false;
  this.step = 0;
  this.width = width;
  this.height = height;
  this.selected = false;
};

Button.prototype.draw = function(canvas) {
  this.context = canvas.getContext('2d');
  if (this.hover || this.selected) {
    this.context.strokeStyle = "#a4ca39";
    this.step++;
  } else
    this.context.strokeStyle = "#bbb";
  this.context.fillStyle = "rgba(0,0,0,0.8)";
  // this.context.fillStyle = "rgba(255,255,255,0.8)";
  this.context.lineWidth = 2;
  this.context.fillRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);
  this.context.strokeRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);
  this.sprite.drawImage(this.step, this.context, this.x + 18, this.y + 24);
  if (this.hover || this.selected)
    this.context.fillStyle = '#a4ca39';
  else
    this.context.fillStyle = '#bbb';
};

function ActionButton(sprite, width, height, action) {
  Button.call(this, sprite, width, height);
  this.action = action;
};

ActionButton.prototype = extend(Button);

ActionButton.prototype.draw = function(canvas) {
  Button.prototype.draw.call(this, canvas);
  this.context.font = 'bold 16px monospace';
  this.context.textBaseline = 'top';
  this.context.textAlign = "center";
  this.context.fillText(this.action.remaining, this.x + (this.width / 2), this.y + 2);  
};

